<template>
  <ul class="glass-detail">
    <li v-for="(item, index) in list" :key="index">
      <img :src="item.image" />
      <span class="glass-title">{{ item.name }}</span>
      <span>{{ item.value }}</span>
    </li>
  </ul>
</template>

<script>
  export default {
    props: ['rest'],
    data () {
      return {
        list: [
          {
            name: '商品名称：',
            value: '',
            key: 'gasName',
            image: require('@/assets/images/modalDetail/icon_tc_qtgp_spmc.png')
          },
          {
            name: '管控级别：',
            value: '',
            key: 'gasControlLevel',
            image: require('@/assets/images/modalDetail/icon_tc_qtgp_gkjb.png')
          },
          {
            name: '钢瓶规格(容积)：',
            value: '',
            key: 'cylVolumn',
            image: require('@/assets/images/modalDetail/icon_tc_qtgp_gpgg.png')
          },
          {
            name: '下检年月：',
            value: '',
            key: 'inspectionDate',
            image: require('@/assets/images/modalDetail/icon_tc_qtgp_xjny.png')
          },
          {
            name: '入库操作人：',
            value: '',
            key: 'entryUserName',
            image: require('@/assets/images/modalDetail/icon_tc_qtgp_rkczr.png')
          },
          {
            name: '入库时间：',
            value: '',
            key: 'entryTime',
            image: require('@/assets/images/modalDetail/icon_tc_qtgp_rksj.png')
          },
          {
            name: '组份：',
            value: '',
            key: 'groupData',
            image: require('@/assets/images/modalDetail/icon_tc_qtgp_zf.png')
          }
        ]
      }
    },
    methods: {},
    mounted () {
      this.list = this.list.map(item => {
        return {
          ...item,
          value: this.rest[item.key]
        }
      })
    }
  }
</script>

<style lang="less" scoped>
  .glass-detail {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    li {
      height: 14%;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #678de1;
      font-size: 20px;
      font-weight: 500;
      color: #ffffff;
      line-height: 1;
      img {
        padding-right: 5px;
      }
      .glass-title {
        padding-right: 4px;
      }
    }
    li:last-child {
      border: none;
    }
  }
  @media screen and (max-height: 860px) {
    .glass-detail li {
      font-size: 16px;
    }
  }
</style>
